<template>

    <mu-container class="profilePaper">
      <mu-row>
        <mu-appbar class="profileAppBar" color="primary">
          <mu-icon value="contacts" slot="left"></mu-icon>
          修改密码
        </mu-appbar>
      </mu-row>
      <mu-row>
        <mu-col span="12">
          <mu-card class="ProfileCard" raised>
            <mu-card-header :title="'用户名： ' + validateForm.username" :sub-title="'用户ID号:  ' + validateForm.userId">
              <mu-avatar slot="avatar">
                <mu-icon value="person"></mu-icon>
              </mu-avatar>
            </mu-card-header>
            <mu-card-text>
              <mu-form ref="form" :model="validateForm" label-position="left" label-width="100" class="mu-demo-form">
                <mu-card-text>
                  <mu-form-item label="旧密码" prop="oldPassword" :rules="rules.oldPassword">
                    <mu-text-field type="password" v-model="validateForm.oldPassword" prop="oldPassword"></mu-text-field>
                  </mu-form-item>
                  <mu-form-item label="新密码" prop="newPassword" :rules="rules.newPassword">
                    <mu-text-field type="password" v-model="validateForm.newPassword" prop="newPassword"></mu-text-field>
                  </mu-form-item>
                  <mu-form-item label="确认新密码" prop="password2" :rules="rules.password2">
                    <mu-text-field type="password" v-model="validateForm.password2"  prop="password2"></mu-text-field>
                  </mu-form-item>
<!--                  <mu-form-item label="支付密码" help-text="" prop="paypassword" :rules="rules.paypassword">-->
<!--                    <mu-text-field v-model="validateForm.paypassword"></mu-text-field>-->
<!--                  </mu-form-item>-->

                </mu-card-text>
                <mu-card-actions>
                  <mu-form-item>
                    <mu-button color="secondary" @click="submit">修改</mu-button>
                    <mu-button @click="navigateTo('/myProfile')">返回</mu-button>
                  </mu-form-item>
                </mu-card-actions>
              </mu-form>
            </mu-card-text>
          </mu-card>
        </mu-col>
      </mu-row>
    </mu-container>

</template>

<script>

import Cookie from 'js-cookie'
import {getUserInfo, updatePassword} from "@/api/user";

    export default {
        name: "MyPasswordUpdate",
      data () {
        return {
          validateForm: {
            id: Cookie.get("user_id"),
            username: null,
            oldPassword: '',
            newPassword: '',
            password2: '',
            // paypassword: ''
          },
          rules: {
            notNull: [
              { validate: (val) => !!val, message: '请输入信息', trigger: 'blur' },
            ],
            oldPassword: [
              { validate: (val) => !!val, message: '请再次输入旧密码', trigger: 'blur' },
            ],
            newPassword: [
              { validate: (val) => !!val, message: '请输入新密码', trigger: 'blur' },
            ],
            password2: [
              { validate: (val) => !!val, message: '请再次输入新密码', trigger: 'blur' },
              { validate: (val) => val === this.validateForm.newPassword ,message: '输入的两次密码不一致' }
            ],
            // paypassword: [
            //   { validate: (val) => !!val, message: '请输入您的支付密码', trigger: 'blur' },
            //   { validate: (val) => /^\d{6}$/.test(val), message: '请输入6位数字', trigger: 'blur' },
            // ]
          },
          userId: null,
          btnLoading: false
        }
      },
      created() {
        this.fetchData();
      },
      methods: {
        fetchData(){
          getUserInfo().then(res => {
            this.validateForm = res.data;
          }).catch(err => {
            this.$toast.error(err)
          })
        },
        submit () {
          this.$refs.form.validate().then((result) => {
            console.log(result)
            if (result == false) {
              this.$toast.warning("请输入必填项！")
              return
            }else {
              this.update()
            }
          });
        },
        clear () {
          this.$refs.form.clear();
          this.validateForm = {
            username: '',
            oldPassword: '',
            newPassword: '',
            password2: '',
            paypassword: ''
          };
        },
        navigateTo(val){
          this.$router.push(val);
        },
        update() {
          // this.btnLoading = true
          updatePassword(this.validateForm).then(res => {
            if (res.code === 1000){
              this.$toast.success("修改成功")
              this.navigateTo('/myProfile')
            }else {
              this.$toast.message(res.message)
            }
          }).catch(err => {
            this.$toast.message("修改失败：" + err.toString())
          })
        },
      }
    }
</script>

<style scoped>
  .login-container{
    width: 100%;
    background-image: linear-gradient(270deg,#8146b4,#6990f6);
    padding: 8px;
  }
  .mu-demo-form {
    width: 100%;
    /*max-width: 460px;*/
  }
  .login-card{
    width: 100%;
    max-width: 80%;
    margin: 50px auto;
  }
  .profileAppBar{
    height: 40px;
    width: auto!important;
    border-radius: 35px;
    margin: 10px;
    color: #fff;
    padding: 10px;
  }
  .profilePaper{
    padding: 10px;
  }
  .ProfileCard{
    width: 100%;
    margin: 0 auto;
  }
</style>
